<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品详情 - 在线商城</title>
    <style>
        .product-detail {
            display: flex;
            padding: 20px;
            gap: 30px;
        }
        .product-images {
            flex: 1;
        }
        .main-image {
            width: 100%;
            height: 400px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }
        .thumbnail-images {
            display: flex;
            gap: 10px;
        }
        .thumbnail {
            width: 80px;
            height: 80px;
            background-color: #eee;
            cursor: pointer;
        }
        .product-info {
            flex: 1;
        }
        .product-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .product-price {
            font-size: 28px;
            color: #e74c3c;
            font-weight: bold;
            margin: 15px 0;
        }
        .product-description {
            margin: 20px 0;
            line-height: 1.6;
        }
        .quantity-selector {
            margin: 15px 0;
        }
        .quantity-input {
            width: 60px;
            padding: 5px;
            text-align: center;
        }
        .action-buttons {
            margin-top: 20px;
        }
        .btn {
            padding: 12px 24px;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .btn-primary {
            background-color: #e74c3c;
            color: white;
        }
        .btn-secondary {
            background-color: #3498db;
            color: white;
        }
    </style>
</head>
<body>
    <%@ include file="../header.jsp" %>
    
    <div class="product-detail">
        <div class="product-images">
            <div class="main-image">
                [主商品图片]
            </div>
            <div class="thumbnail-images">
                <div class="thumbnail">[缩略图1]</div>
                <div class="thumbnail">[缩略图2]</div>
                <div class="thumbnail">[缩略图3]</div>
            </div>
        </div>
        
        <div class="product-info">
            <div class="product-name">示例商品名称</div>
            <div class="product-price">¥99.00</div>
            
            <div class="product-description">
                <p>这是商品的详细描述信息。在这里可以详细介绍商品的特点、规格、使用方法等信息。</p>
                <p>商品具有以下特点：</p>
                <ul>
                    <li>高质量材料制作</li>
                    <li>设计精美</li>
                    <li>使用方便</li>
                    <li>经久耐用</li>
                </ul>
            </div>
            
            <div class="quantity-selector">
                <label>数量：</label>
                <input type="number" class="quantity-input" value="1" min="1" max="99">
            </div>
            
            <div class="action-buttons">
                <button class="btn btn-primary" onclick="addToCart()">加入购物车</button>
                <button class="btn btn-secondary" onclick="buyNow()">立即购买</button>
            </div>
        </div>
    </div>
    
    <script>
        function addToCart() {
            alert('商品已添加到购物车');
        }
        
        function buyNow() {
            alert('正在前往结算页面');
        }
    </script>
</body>
</html>